﻿<link href="~/Content/richtext/bootstrap.css" rel="stylesheet" />
<link href="~/Content/richtext/summernote.css" rel="stylesheet" />
<script src="~/Content/richtext/summernote.js"></script>
<div class="note-toolbar panel-heading">
    <div class="note-btn-group btn-group note-font">
        <button type="button" class="note-btn btn btn-default btn-sm note-btn-bold" tabindex="-1" title="" data-original-title="粗体 (CTRL+B)" onclick="document.getElementById('myWriterControl').DCExecuteCommand('bold', true, null);"><i class="note-icon-bold"></i></button>
        <button type="button" class="note-btn btn btn-default btn-sm note-btn-underline" tabindex="-1" title="" data-original-title="下划线 (CTRL+U)" onclick="document.getElementById('myWriterControl').DCExecuteCommand('Underline', true, null);"><i class="note-icon-underline"></i></button>
        <button type="button" class="note-btn btn btn-default btn-sm" tabindex="-1" title="" data-original-title="清除格式 (CTRL+\)"><i class="note-icon-eraser"></i></button>
    </div>
    <div class="note-btn-group btn-group note-fontname">
        <button type="button" class="note-btn btn btn-default btn-sm dropdown-toggle" tabindex="-1" data-toggle="dropdown" title="" data-original-title="字体" aria-expanded="false">
            <span class="note-current-fontname"><span class="l-btn-icon icon-fontfa" style="width:12px;height:12px;"></span>&nbsp;&nbsp;&nbsp;&nbsp;</span> <span class="note-icon-caret"></span>
        </button>        
        <div class="dropdown-menu note-check dropdown-fontname">
        </div>
    </div>
    <div class="note-btn-group btn-group note-color">
        <div class="note-btn-group btn-group note-color">
            <button type="button" class="note-btn btn btn-default btn-sm note-current-color-button" tabindex="-1" title="" data-original-title="最近使用" data-backcolor="#FFFF00"><i class="note-icon-font note-recent-color" style="background-color: rgb(255, 255, 0);"></i></button>
            <button type="button" class="note-btn btn btn-default btn-sm dropdown-toggle" tabindex="-1" data-toggle="dropdown" title="" data-original-title="更多"><span class="note-icon-caret"></span></button>
            <div class="dropdown-menu">
                <li>
                    <div class="btn-group">
                        <div class="note-palette-title">背景</div>
                        <div>    
                            <button type="button" class="note-color-reset btn btn-default" data-event="backColor" data-value="inherit">透明    </button>  
                        </div>
                        <div class="note-holder" data-event="backColor">
                            <div class="note-color-palette">
                            </div>
                        </div>
                    </div>
                    <div class="btn-group">
                        <div class="note-palette-title">前景</div>
                        <div>
                            <button type="button" class="note-color-reset btn btn-default" data-event="foreColor" data-value="black">默认    </button>
                        </div>
                        <div class="note-holder" data-event="foreColor">
                            <div class="note-color-palette">
                            </div>
                        </div>
                    </div>
                </li>
            </div>
        </div>
    </div>
    <div class="note-btn-group btn-group note-para">
        <button type="button" class="note-btn btn btn-default btn-sm" tabindex="-1" title="" data-original-title="无序列表 (CTRL+SHIFT+NUM7)"><i class="note-icon-unorderedlist"></i></button>
        <button type="button" class="note-btn btn btn-default btn-sm" tabindex="-1" title="" data-original-title="有序列表 (CTRL+SHIFT+NUM8)"><i class="note-icon-orderedlist"></i></button>
        <div class="note-btn-group btn-group">
            <button type="button" class="note-btn btn btn-default btn-sm dropdown-toggle" tabindex="-1" data-toggle="dropdown" title="" data-original-title="段落"><i class="note-icon-align-left"></i> <span class="note-icon-caret"></span></button>
            <div class="dropdown-menu">
                <div class="note-btn-group btn-group note-align">
                    <button type="button" class="note-btn btn btn-default btn-sm" tabindex="-1" title="" data-original-title="左对齐 (CTRL+SHIFT+L)"><i class="note-icon-align-left"></i></button>
                    <button type="button" class="note-btn btn btn-default btn-sm" tabindex="-1" title="" data-original-title="居中对齐 (CTRL+SHIFT+E)"><i class="note-icon-align-center"></i></button>
                    <button type="button" class="note-btn btn btn-default btn-sm" tabindex="-1" title="" data-original-title="右对齐 (CTRL+SHIFT+R)"><i class="note-icon-align-right"></i></button>
                    <button type="button" class="note-btn btn btn-default btn-sm" tabindex="-1" title="" data-original-title="两端对齐 (CTRL+SHIFT+J)"><i class="note-icon-align-justify"></i></button>
                </div>
                <div class="note-btn-group btn-group note-list">
                    <button type="button" class="note-btn btn btn-default btn-sm" tabindex="-1" title="" data-original-title="减少缩进 (CTRL+[)"><i class="note-icon-align-outdent"></i></button>
                    <button type="button" class="note-btn btn btn-default btn-sm" tabindex="-1" title="" data-original-title="增加缩进 (CTRL+])"><i class="note-icon-align-indent"></i></button>
                </div>
            </div>
        </div>
    </div>
    <div class="note-btn-group btn-group note-table">
        <div class="note-btn-group btn-group">
            <button type="button" class="note-btn btn btn-default btn-sm dropdown-toggle" tabindex="-1" data-toggle="dropdown" title="" data-original-title="表格"><i class="note-icon-table"></i> <span class="note-icon-caret"></span></button>
            <div class="dropdown-menu note-table">
                <div class="note-dimension-picker">
                    <div class="note-dimension-picker-mousecatcher" data-event="insertTable" data-value="1x1" style="width: 10em; height: 10em;"></div>
                    <div class="note-dimension-picker-highlighted"></div>
                    <div class="note-dimension-picker-unhighlighted"></div>
                </div>
                <div class="note-dimension-display">1 x 1</div>
            </div>                   
        </div>
    </div>
</div>
<script>
    //字体
    var fontname = ['黑体', '楷体', '宋体', '微软雅黑','Arial', 'Arial Black', 'Comic Sans MS', 'Courier New',
        'Helvetica Neue', 'Helvetica', 'Impact', 'Lucida Grande',
        'Tahoma', 'Times New Roman', 'Verdana'];
    var corlor = [
        ['#000000', '#424242', '#636363', '#9C9C94', '#CEC6CE', '#EFEFEF', '#F7F7F7', '#FFFFFF'],
        ['#FF0000', '#FF9C00', '#FFFF00', '#00FF00', '#00FFFF', '#0000FF', '#9C00FF', '#FF00FF'],
        ['#F7C6CE', '#FFE7CE', '#FFEFC6', '#D6EFD6', '#CEDEE7', '#CEE7F7', '#D6D6E7', '#E7D6DE'],
        ['#E79C9C', '#FFC69C', '#FFE79C', '#B5D6A5', '#A5C6CE', '#9CC6EF', '#B5A5D6', '#D6A5BD'],
        ['#E76363', '#F7AD6B', '#FFD663', '#94BD7B', '#73A5AD', '#6BADDE', '#8C7BC6', '#C67BA5'],
        ['#CE0000', '#E79439', '#EFC631', '#6BA54A', '#4A7B8C', '#3984C6', '#634AA5', '#A54A7B'],
        ['#9C0000', '#B56308', '#BD9400', '#397B21', '#104A5A', '#085294', '#311873', '#731842'],
        ['#630000', '#7B3900', '#846300', '#295218', '#083139', '#003163', '#21104A', '#4A1031']
    ];
    var fontnamehtml = "";
    var corlorhtml = "";
    var backcorlorhtml = "";
    $(function () { 
        //字体
        if (fontname.length > 0) {
            for (var i = 0; i < fontname.length; i++) {
                fontnamehtml += '<li><a href="#" data-value="' + fontname[i] + '" class=""><i class="note-icon-check" ></i> <span style="font-family: ' + fontname[i] + '">' + fontname[i] + '</span></a></li>';
            }
            $("div .dropdown-fontname").append(fontnamehtml);
        }
        $("div .dropdown-fontname a").click(function (e) {
            document.getElementById('myWriterControl').DCExecuteCommand('FontName', true, $(this).attr("data-value"));
        })
        //背景色
        if (corlor.length > 0) {
            for (var c = 0; c < corlor.length; c++) {
               // debugger
                corlorhtml += '<div class="note-color-row">';
                backcorlorhtml += '<div class="note-color-row">';
                for (var o = 0; o < corlor[c].length; o++) {
                    backcorlorhtml += '<button type="button" class="note-color-btn" style="background-color:' + corlor[c][o] + '" data-event="backColor" data-value="' + corlor[c][o] + '" title="" data-toggle="button" tabindex="-1" data-original-title="' + corlor[c][o] + '"></button>';
                    corlorhtml += '<button type="button" class="note-color-btn" style="background-color:' + corlor[c][o] + '" data-event="foreColor" data-value="' + corlor[c][o] + '" title="" data-toggle="button" tabindex="-1" data-original-title="' + corlor[c][o] + '"></button>';
                }
                corlorhtml += '</div>';
                backcorlorhtml += '</div>';
            }
            $("div div[data-event=backColor] .note-color-palette").append(backcorlorhtml);
            $("div div[data-event=foreColor] .note-color-palette").append(corlorhtml);
        }
        $("button[data-event=backColor]").click(function (e) {
            document.getElementById('myWriterControl').DCExecuteCommand('BackColor', false, $(this).attr("data-value"));
        })
        $("button[data-event=foreColor]").click(function (e) {
            document.getElementById('myWriterControl').DCExecuteCommand('Color', true, $(this).attr("data-value"));
        })
    });
</script>
